<template>
  <div class="video-wrap">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/121102.png">
    <div>
    </div>
    <div class="submit">
      <!-- <div class="title">请填写下面信息</div> -->
      <div class="item">
        <label for="phone">姓名</label>
        <input type="text" name="userName" v-model="userName" placeholder="请输入您的姓名">
      </div>
      <div class="item">
        <label for="phone">电话号码</label>
        <input type="tel" name="phone" v-model="phone" placeholder="请输入您的手机号">
      </div>
      <!--       <div class="item">
        <label for="hospital">所处医院</label>
        <select name="hospital" placeholder="所属医院" v-model="hospital">
          <option value="上海东方医院南院" checked>&nbsp;&nbsp;&nbsp;&nbsp;上海东方医院南院</option>
          <option value="上海江湾医院">&nbsp;&nbsp;&nbsp;&nbsp;上海江湾医院</option>
          <option value="中西医结合医院">&nbsp;&nbsp;&nbsp;&nbsp;中西医结合医院</option>
        </select>
      </div> -->
      <!--       <div class="item">
        <label for="bed">科室及床位</label>
        <input type="text" placeholder="科室和床位号" v-model="bed">
      </div> -->
      <div class="beiju">
        <p class="header">关于派送：</p>
        <span class="des">工作日下午三点前提交，次日派送，三点后隔日派送，节假日顺延。</span>
        <p class="bule">注：一个手机号限领一次，客服会在24小时内电话联系。</p>
      </div>
      <button id="submit1" @click="submit()">提交</button>
    </div>
    <mt-popup v-model="popupVisible" popup-transition="popup-fade">
      <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/121902.png" alt="" style="width: 60px;
    height: 60px;
    position: absolute;
    right: -27px;
    top: -28px;" @click="close()">
      <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/121901.jpg" alt="" style="width:100%;height:100%;">
    </mt-popup>
  </div>
</template>
<script>
import { Toast, Indicator, MessageBox } from 'mint-ui';
import { saveAnswerUserInfo } from 'api/activity';
import { checkPhone, checkZhName } from 'common/utils';
export default {
  data() {
    return {
      isAns1: 0,
      isAns2: 0,
      isAns3: 0,
      phone: '',
      hospital: '暂无',
      bed: '暂无',
      userName: '',
      popupVisible: false
    }
  },
  methods: {
    submit: function() {
      let data = {
        phone: this.phone,
        hospitalName: this.hospital,
        bed: this.bed,
        userName: this.userName,
        departName: '暂无' + this.isAns1 + this.isAns2 + this.isAns3
      }
      if (!this.userName) {
        Toast('请输入正确的姓名,名称为2-4位汉字');
        return false
      }

      if (!checkPhone(this.phone)) {
        Toast('请输入正确的手机号', '温馨提示');
        return false
      }

      if (!this.hospital) {
        Toast('请输入所处医院', '温馨提示');
        return false
      }

      if (!this.bed) {
        Toast('请输入您的科室和床位号', '温馨提示');
        return false
      }

      Indicator.open();
      saveAnswerUserInfo(data).then((data) => {
        Indicator.close();
        // Toast('客服将在24小时内跟您联系', '温馨提示')
        this.phone = ''
        this.userName = ''
        this.popupVisible = true;
      }, (msg) => {
        Indicator.close();
        Toast(msg, '温馨提示');
      })

    },
    close: function() {
      this.popupVisible = false;
    }
  }
}

</script>
<style lang="less">
.video-wrap {
  overflow-x: hidden;
  background: url('http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/1219.jpg') no-repeat center;
  background-size: 100% 100%;
  text-align: center;
  width: 100%;
  height: 100%;
  &>img {
    display: block;
    width: 406px;
    vertical-align: top;
    position: relative;
    padding-top: 35px;
    left: 50%;
    margin-left: -203px;
  }
  .mint-popup {
    background: none;
  }
  .question {
    background: url('http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/1120_video_03');
    background-size: 100% auto;
    background-repeat: no-repeat;
    .title {
      font-family: PingFangSC-Semibold;
      font-weight: bold;
      font-size: 18px;
      color: #3982bc;
      letter-spacing: -0.44px;
      text-align: left;
      padding: 10px 20px;
    }
    .answer {
      font-family: PingFangSC-Semibold;
      font-weight: bold;
      font-size: 14px;
      color: #373a3d;
      letter-spacing: -0.34px;
      text-align: left;
      margin: 6px 0 6px 34px;
      line-height: 22px;
      width: 100%;
    }
  }
  .submit {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    margin-top: 30px;
    .title {
      font-family: PingFangSC-Semibold;
      font-weight: bold;
      font-size: 20px;
      color: #3982bc;
      letter-spacing: -0.49px;
      text-align: center;
      margin: 20px;
    }
    .item {
      line-height: 32px;
      margin: 6px 0;
      label {
        width: 240px;
        height: 42px;
        text-align: center;
        font-family: PingFangSC-Semibold;
        font-weight: bold;
        font-size: 22px;
        color: #4f5255;
        letter-spacing: 5px;
        float: left;
        line-height: 42px;
      }
      input,
      select {
        opacity: 0.72;
        background: #ffffff;
        border: 1px solid #979797;
        width: 380px;
        height: 42px;
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #94989b;
        letter-spacing: 2px;
        text-align: center
      }
    }
    .beiju {
      font-family: PingFangSC-Semibold;
      font-size: 18px;
      color: #002A00;
      letter-spacing: 1px;
      line-height: 20px;
      text-align: left;
      font-weight: bold;
      margin-top: 40px;
      padding-left: 50px;
      .header {
        font-size: 20px;
      }
      .bule {
        color: red;
      }
      p {
        margin: 10px 0;
      }
    }
    #submit1 {
      margin: 20px auto; // margin-bottom: 40px;
      background-image: linear-gradient(-180deg, invalid gradient);
      border-radius: 10px;
      width: 281px;
      height: 54px;
      font-family: PingFangSC-Semibold;
      font-weight: bold;
      font-size: 24px;
      color: #ffffff;
      letter-spacing: -0.58px;
      text-align: center;
      background: #3873F4;
    }
  }
  .radioBox {
    width: 12px;
    height: 12px;
    border: 2px solid #2e73b3;
    display: inline-table;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    input {
      position: absolute !important;
      opacity: 0 !important;
      width: 12px;
      height: 12px;
      top: 0;
      left: 0;
      z-index: 20;
    }
  }
  .radioBox.check {
    border-radius: 0;
  }
  .radioBox.active {
    &:after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2e73b3;
      left: 1px;
      top: 1px;
    }
  }
  .radioBox.check.active {
    &:after {
      border-radius: 0;
    }
  }
}

</style>
